<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
			
		<title>Toma de Decisiones</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
		<link rel="stylesheet" href="css/custom.css" />
		<link rel="stylesheet" href="css/app.css" />
		<link rel="stylesheet" href="css/fonts.css" />
		<script type="text/javascript" charset="utf-8" src="js/cordova-2.9.0.js"></script>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	    <script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/library.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/common.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/localize.js"></script>
    	<script type="text/javascript" charset="utf-8">
		 	
		 	$(document).on("pagebeforeshow", "#settings",function(event){
		 		//alert(1);
		 		document.addEventListener("deviceready", onDeviceReady, true);
		 	});
	 		
			function onDeviceReady() {
		        excecuteLocalization(["settings","global"]);
		        checkLocale(); 
		    }
			
			function checkLocale(){
				
				var locale = window.localStorage.getItem("locale");
				//alert('stored locale 0: ' + locale);
				
				if(!locale || locale==""){
					navigator.globalization.getLocaleName(
			    			function (locale) {
			    				  //alert('locale: ' + locale.value + '\n');
			    				  var arrLocale = locale.value.split("_");
			    				  locale.value = arrLocale[0];
			    				  //alert('locale: ' + locale.value);
			    				  
			    				  $("#language_select").val(locale.value).selectmenu('refresh');
			    			},
			    			function () {
			    				alert('Error getting locale. Using default: en');
			    				$("#language_select").val("en").selectmenu('refresh');
			    			}
			    		);
				} else{
					//alert('stored locale: ' + locale);
					$("#language_select").val(locale).selectmenu('refresh');
				}
			}
			
			function saveSettings(){
				var locale = $("#language_select").val();
				saveLocale(locale);
				alert($("#saved_msgTag").html());
				window.location.reload();
			}
			
			
			function saveLocale(locale){
				window.localStorage.setItem("locale", locale);
			}
			
			
		</script>
		<style>
			.nav-search .ui-btn-up-a {
				background-image:none;
				background-color:#333333;
			}
			.nav-search .ui-btn-inner {
				border-top: 1px solid #888;
				border-color: rgba(255, 255, 255, .1);
			}
		</style>
	</head>
<body style="text-align:center;">

<div  data-role="page" style="display:none;" id="settings"> 
	<div data-role="panel" data-position="right" data-position-fixed="false" data-display="overlay" id="menu-panel" data-theme="a">

		<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
			<li data-icon="delete" style="background-color:#111;">
				<a href="#header" data-rel="close"><span data-translate="localize">global.close_menu</span></a>
			</li>
			<li>
				<a href="javascript:backToHome();"><span data-translate="localize">global.go_home</span></a>
			</li>
			<li>
				<a href="javascript:listByCategory();"><span data-translate="localize">global.read_by_category</span></a>
			</li>
			<li>
				<a href="javascript:window.location.href='settings.html'"><span data-translate="localize">global.settings</span></a>
			</li>
			<li>
				<a href="javascript:exitAPP();"><span data-translate="localize">global.exit</span></a>
			</li>
		</ul>
		<span data-translate="localize" id="confirm_msgTag" style="display:none;">global.confirm_msg</span>
		<!-- panel content goes here -->
	</div><!-- /panel -->
	
	<div  data-role="header" id="header"  data-position="fixed">
		<img border="0" src="images/img-logo.png" alt="Logo" height="35" style="float:left; display:inline"/>
		<a href="javascript:openMenu();" data-icon="gear" class="ui-btn-right" id="openMenuButton"><span data-translate="localize">global.menu</span></a>
	</div> 
	
	<div  data-role="content">
	
		<div class="main-container">
			
			<div  data-role="content">
	
	
				<table style="width: 100%">
					<tr>
						<td>
							<span data-translate="localize" id="saved_msgTag"  style="display:none;">global.saved_msg</span>
						</td>
					</tr>
					<tr>
						<td>
							<article><span data-translate="localize">settings</span></article>
						</td>
					</tr>
					<tr>
						<td>			
							&nbsp;
						</td>
					</tr>
					<tr>
						<td>		
							<div data-role="fieldcontain">
								<label for="language_select" class="select"><span data-translate="localize">select_language</span>:</label>
								<select name="language_select" id="language_select">
									<option value="en" data-translate="localize">english</option>
									<option value="es" data-translate="localize">spanish</option>
								</select>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<button id="higlighted" onclick="saveSettings();"><span data-translate="localize">save</span></button>	
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div> 
	<!-- 
	<div  data-role="footer" data-position="fixed">
		<button class="button-main-small" onclick="exitAPP();"><span data-translate="localize">global.exit</span></button>
	</div>
	-->
</div>
</body>
</html>